<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>收藏</title>
    <style>
        #app{
            background-color: #d0d5d8;
        }
    </style>
</head>
<body>
<div id="app">
    <button @click="questionCollection">题目</button>
    <button @click="examCollection">exam</button>
    <div >
        <table style="border-collapse: collapse;text-align: center" border="1">
            <tr>
                <th>标题</th>
                <th>科目</th>
                <th>标签</th>
                <th>难度</th>
                <th>收藏时间</th>
                <th></th>
            </tr>
            <tr v-for="collection in collections">
                <td width="18%">{{collection.title}}</td>
                <td width="18%"> {{collection.subject}}</td>
                <td width="18%">{{collection.tags}}</td>
                <td width="18%">{{collection.level}}</td>
                <td width="18%">{{collection.collectionTime}}</td>
                <td width="10%" v-if="display==1"><a  v-bind:href="'exam.html?examId='+collection.examId">链接</a></td>
                <td width="10%" v-else-if="display==2"><a  v-bind:href="'question.html?questionId='+collection.questionId">链接</a></td>
            </tr>
        </table>
    </div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/vue.min.js"></script>
<script type="text/javascript">
    new Vue({
        el:"#app",
        data:{
            collections:[],
            nowPage:1,
            pages:1,
            size:10,
            display:1
        },
        mounted:function(e){
            this.examCollection(e);
        },
        methods:{
            questionCollection:function (e) {
                let that=this
                $.ajax({
                    url:"/collections/search/question/"+that.nowPage,
                    type:"GET",
                    success:function (result) {
                        console.log(result)
                        that.collections=result.data.questionCollections
                        that.nowPage=result.data.current
                        that.pages=result.data.pages
                        that.size=result.data.size
                        that.display=2
                    }
                })
            },
            examCollection:function (e) {
                let that=this
                $.ajax({
                    url:"/collections/search/exam/"+that.nowPage,
                    type:"GET",
                    success:function (result) {
                        console.log(result)
                        that.collections=result.data.examCollections
                        that.nowPage=result.data.current
                        that.pages=result.data.pages
                        that.size=result.data.size
                        that.display=1
                    }
                })
            }
        }
    })
</script>
</body>
</html>